<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-11 08:37:46
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-07-23 16:09:37
 * @Description: file content
-->
<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="pageSizes"
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
  const props = defineProps({
    total: { type: Number, default: 0 },
    pageIndex: { type: Number, default: 1 },
    pageSize: { type: Number, default: 10 },
    pageSizes: { type: Array as () => number[], default: () => [10, 20, 50, 100] },
    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }
  })

  const emit = defineEmits(['pagination-change'])

  const currentPage = ref(props.pageIndex)
  const pageSize = ref(props.pageSize)

  // 监听父组件传入的值变化
  watch(
    () => props.pageIndex,
    (val: number) => (currentPage.value = val)
  )

  watch(
    () => props.pageSize,
    (val: number) => (pageSize.value = val)
  )

  const handleSizeChange = (size: number) => {
    pageSize.value = size
    currentPage.value = 1 // 重置当前页码 为 1 触发页码改变事件(看需求要不要)
    emitChange()
  }

  const handleCurrentChange = (page: number) => {
    currentPage.value = page
    emitChange()
  }

  const emitChange = () => {
    emit('pagination-change', {
      pageIndex: currentPage.value,
      pageSize: pageSize.value
    })
  }
</script>
